<template>
    <div>
        <el-dialog v-model="ViewdialogVisible" class="tsDialog" width="80%" align-center destroy-on-close draggable>
            <template #header="{ close }">
                <div class="dialog-header flex justify-between items-center">
                    <div>查看评审结果</div>
                    <el-icon class="el-icon--left cursor-pointer" @click="close">
                        <CircleCloseFilled color="#fff" />
                    </el-icon>
                </div>
            </template>
            <div>
                <!-- 基本信息 -->
                <div class="bg-white mt-[10px]">
                    <BaseHead>基本信息</BaseHead>
                    <div class="p-[10px]">
                        <el-table :data="tableData" class="w-full" @selection-change="handleSelectionChange" stripe>

                            <el-table-column prop="productName" label="成果名称" />
                            <el-table-column label="所有完成人">
                                <template #default="scope">
                                    <span v-for="(item, index) in scope.row.authorList1" :key="item.id">
                                        <el-link type="primary" v-if="item.id != '3'"
                                            @click="openpeopledetails(item)">{{
            item.name
        }}<span v-if="index + 1 != scope.row.authorList1.length">,</span></el-link>
                                        <span type="primary" v-else>{{
            item.name
        }}<span v-if="index + 1 != scope.row.authorList1.length">,</span></span>
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="applyDate" label="申请日期" />
                            <el-table-column prop="honorState" label="获奖状态">
                                <template #default="scope">
                                    <Feedback :id="scope.row.honorState" :list="hjztist"></Feedback>
                                </template>
                            </el-table-column>
                            <el-table-column prop="unitId" label="所属单位">

                                <template #default="scope">
                                    <Feedback :id="scope.row.unitId" :list="zcgsdwList"
                                        :mapping="['codeColumn', 'valueColumn']">
                                    </Feedback>
                                </template>
                            </el-table-column>
                            <el-table-column prop="selectExpert" label="已选专家" />
                            <el-table-column prop="reviewMark" label="评审进度">
                                <template #default="scope">
                                    <el-progress :text-inside="true" :stroke-width="26"
                                        :percentage="(Number(scope.row.submitNum) + Number(scope.row.noSubmitNum)) != 0 ? Number(scope.row.submitNum) / (Number(scope.row.submitNum) + Number(scope.row.noSubmitNum)) * 100 : 0" /></template>
                            </el-table-column>
                            <el-table-column prop="checkstatus" label="审核状态"> <template #default="scope">
                                    <Feedback :id="scope.row.checkstatus" :list="shztList">
                                    </Feedback>
                                </template>
                            </el-table-column>
                            <el-table-column prop="reviewMark" label="评审分值" />
                        </el-table>
                        <div class="mt-[20px] flex justify-end">
                            <pagination v-show="total > 0" :total="total" v-model:page="pageInfo.pageNum"
                                v-model:limit="pageInfo.pageSize" @pagination="getList" />
                        </div>
                    </div>
                </div>
            </div>
            <peopleDetails :activ="activ" :obj="obj" @close-dialog="activ = false"></peopleDetails>
        </el-dialog>
    </div>
</template>
<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import { getexpertReviewBookListByReviewPlan } from "@/api/achievement/cghj"
import useCategoryStore from "@/store/modules/category";
import peopleDetails from '@/components/peopleDetails/peopleDetails.vue'

const ViewdialogVisible = defineModel();
const props = defineProps({
    applyInfoId: String,
    reviewerId: String,

})

const categoryStore = useCategoryStore();
const { hjztist, zcgsdwList, shztList } = storeToRefs(categoryStore); // 解构状态
const { gethjztist, getzcgsdwList, getshztList } = categoryStore; // 解构方法
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = ref([]);
const getList = (i) => {
    if (i == 1) {
        pageInfo.value.pageNum = 1
    }
    let parms = {
        applyInfoId: props.applyInfoId,
        reviewerId: props.reviewerId,
        ...pageInfo.value,
    }
    getexpertReviewBookListByReviewPlan(parms).then(res => {
        if (res.code == 200) {
            tableData.value = res.rows
            tableData.value.forEach(item => {
                if (item.authornames && item.authorpids) {
                    let zcNameArr = item.authornames.split(',')
                    let zcNameArr1 = item.authorpids.split(',')
                    let zcNameArr2 = zcNameArr.map((val, index) => {
                        return {
                            name: val,
                            id: zcNameArr1[index]
                        }
                    })
                    Reflect.set(item, 'authorList1', zcNameArr2)
                }
            })
            total.value = res.total
        }
    })
}
if (!hjztist.value.length) {
    gethjztist()
}
if (!zcgsdwList.value.length) {
    getzcgsdwList()
}
if (!shztList.value.length) {
    getshztList()
}

///查看详情
const activ = ref(false)
const obj = ref('')
const openpeopledetails = function (row) {
    obj.value = row.id
    activ.value = true
}




watch(
    () => ViewdialogVisible.value,
    (newValue) => {
        if (newValue) {
            getList(1)
        }
    },
    { deep: true, immediate: true }
);

</script>
<style lang="scss">
.gdlable {
    width: 140px;
}
</style>
<style scoped lang="scss">
// @import url("@/views/achievement/index.scss");

:deep(.el-select--default) {


    .el-select__wrapper.is-disabled {
        background-color: #fff;
        box-shadow: 0 0 0 0px var(--el-select-disabled-border) inset;
        color: #606266;
        cursor: not-allowed;

        .el-select__selected-item {
            color: #606266;
        }
    }

    .el-select__suffix {
        display: none;
    }
}

:deep(.el-descriptions) {
    .el-descriptions__content {
        width: auto !important;

    }
}

:deep(.tsDialog) {

    padding: 0;
    background-color: #f0f2f5;
    height: 90vh;
    overflow-y: hidden;

    .dialog-header {
        background: #409eff;
        color: #fff;
        height: 40px;
        padding: 0 10px;
    }

    .el-dialog__header {
        padding: 0;
    }

    .el-dialog__body {
        height: calc(100% - 40px);
        overflow: auto;
        padding-bottom: 55px;
    }

    .dialog-footer {
        background: #fff;
        padding: 5px 0;
        border-top: 1px solid #ddd;

        .operate-btns {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }




}
</style>
